<template>
	<view>
		<view class="vip-top">
			<view class="vip-icon">
				<view class="icon" @click="back">
					<uv-icon name="arrow-left" size="24" bold></uv-icon>
				</view>
				<view class="title">
					开通会员
				</view>
			</view>
			<view class="vip-title">
				<view class="h1">
					<view class="title-left">
						您是：<image src="../../static/my/fh.png" v-if="user_status==0"></image>
						<image src="../../static/home/dj.png" v-else></image>
						非会员
					</view>
					<view class="title-right">
						会员有效期还有180天
					</view>
				</view>
			</view>
			<view class="vip-info">
				<view class="vip-tab">
					<view class="tab" v-for="(item,index) in tabs" :key="index" @click="clickTab(index)">
						<image :src="item.image" mode="" v-if="is_fvip==index"></image>
						<view class="tab-title">
							{{item.title}}
						</view>
					</view>
				</view>
				<image src="../../static/my/vip1.png" mode="" v-if="is_fvip==0"></image>
				<image src="../../static/my/vip2.png" mode="" v-if="is_fvip==1"></image>
				<image src="../../static/my/vip3.png" mode="" v-if="is_fvip==2"></image>
				<image src="../../static/my/vip4.png" mode="" v-if="is_fvip==3"></image>
				<image src="../../static/my/vip5.png" mode="" v-if="is_fvip==4"></image>
				<view class="vip-content">
					<!-- <view class="content-title">
						当前权限
					</view> -->
					<view class="content-image">
						<!-- <uv-grid :col="4" @click="click">
							<uv-grid-item v-for="(item,index) in baseList" :key="index">
								<uv-icon :name="item.name" :size="52"></uv-icon>
								<text class="grid-text" style="margin-top: 16rpx;">{{item.title}}</text>
							</uv-grid-item>
						</uv-grid> -->
						<image src="../../static/vip/qx1.png" mode="" v-if="is_fvip==0"></image>
						<image src="../../static/vip/qx2.png" mode="" v-if="is_fvip==1"></image>
						<image src="../../static/vip/qx3.png" mode="" v-if="is_fvip==2"></image>
						<image src="../../static/vip/qx4.png" mode="" v-if="is_fvip==3"></image>
						<image src="../../static/vip/qx5.png" mode="" v-if="is_fvip==4"></image>
					</view>
				</view>

			</view>
			<button class="vip-btn" @click="upgrade">升级会员等级</button>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_status: 0,
				is_fvip: 0,
				tabs: [{
					image: '../../static/vip/fvip.png',
					title: "非会员"
				}, {
					image: '../../static/vip/picon.png',
					title: "普通会员"
				}, {
					image: '../../static/vip/icon1.png',
					title: "VIP1"
				}, {
					image: '../../static/vip/icon2.png',
					title: "VIP2"
				}, {
					image: '../../static/vip/icon3.png',
					title: "VIP3"
				}],
				baseList: [{
					name: 'photo',
					title: '李白'
				}, {
					name: 'lock',
					title: '韩信'
				}, {
					name: 'star',
					title: '刘备'
				}, {
					name: 'star',
					title: '元芳'
				}]
			}
		},
		methods: {
			clickTab(index) {
				this.is_fvip = index
			},
			upgrade() {
				let url = '../../subcontract/paysuccess/index'
				uni.navigateTo({
					url: url
				})
			},
			back() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.vip-top {
		width: 750rpx;
		// height: 360rpx;
		// position: relative;
		background: linear-gradient(90deg, #FBF2F2 0%, #F9D6D7 100%);
		padding-top: 88rpx;
		box-sizing: border-box;


		.vip-icon {
			position: relative;
			// margin-top: 88rpx;
			height: 88rpx;
			width: 750rpx;
			padding-top: 22rpx;
			box-sizing: border-box;

			.icon {
				// width: 15rpx;
				// height: 28rpx;
				position: absolute;
				z-index: 2;
				// background-color: red;
				// top: 100rpx;
				left: 10rpx;
				font-weight: 600;
			}

			.title {
				width: 136rpx;
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #000000;
				position: absolute;
				left: 308rpx;
			}
		}

		.vip-title {
			// background-color: red;
			height: 88rpx;
			width: 750rpx;
			display: flex;
			align-items: center;
			padding: 0rpx 40rpx;
			box-sizing: border-box;

			.h1 {
				width: 100%;
				height: 44rpx;
				display: flex;
				justify-content: space-between;
				// background-color: blue;

				.title-left {
					width: 236rpx;
					height: 44rpx;
					font-size: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					color: #333333;
					display: flex;
					align-items: center;

					image {
						width: 32rpx;
						height: 28rpx;
						margin-right: 20rpx;
					}
				}

				.title-right {
					width: 270rpx;
					height: 40rpx;
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}
		}

		.vip-info {
			width: 750rpx;
			height: 1352rpx;
			// background-color: blue;
			position: relative;
			overflow: hidden;


			.vip-tab {
				width: 750rpx;
				height: 88rpx;
				position: absolute;
				z-index: 99;
				display: flex;
				align-items: center;
				// justify-content: space-between;
				// padding-left: 40rpx;
				// padding-right: 2rpx;
				box-sizing: border-box;
				overflow: hidden;
				padding-left: 40rpx;


				// background-color: red;

				.tab {
					width: 150rpx;
					height: 40rpx;
					display: flex;
					// font-size: 28rpx;
					// font-family: PingFangSC, PingFang SC;
					// font-weight: 500;
					// color: #6D6D6D;
					flex-wrap: nowrap;
					z-index: 99;
					position: relative;
					margin-left: 10rpx;
					// align-items: center;
					// justify-content: center;

					image {
						width: 20rpx;
						height: 20rpx;
						z-index: 99;
						position: absolute;
						top: 10rpx;
						// left: 10rpx;
					}

					.tab-title {
						width: 112rpx;
						height: 40rpx;
						font-size: 28rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #6D6D6D;
						// display: flex;
						position: absolute;
						// justify-content: center;
						margin-left: 30rpx;
						// margin-right: 2rpx;
					}
				}

				.tab:nth-child(3) {
					margin-left: 40rpx;
				}

				.tab:nth-child(4) {
					margin-left: -10rpx;
				}

			}

			image {
				width: 750rpx;
				height: 1352rpx;
				position: absolute;
				top: 0rpx;
			}

			.vip-content {
				width: 750rpx;
				height: 1352rpx;
				position: absolute;
				top: 88rpx;
				padding-top: 56rpx;
				box-sizing: border-box;

				// background-color: red;
				.content-title {
					width: 750rpx;
					height: 44rpx;
					font-size: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 550;
					color: #333333;
					display: flex;
					justify-content: center;
				}

				.content-image {
					width: 100%;
					padding-left: 4rpx;
					padding-right: 32rpx;
					height: 1352rpx;
					// background-color: red;
					margin-top: 60rpx;
					padding-bottom: 224rpx;
					box-sizing: border-box;

					image {
						height: 926rpx;
						width: 686rpx;
					}
				}
			}
		}

		.vip-btn {
			width: 370rpx;
			height: 96rpx;
			background: linear-gradient(90deg, #EC8D7E 0%, #FF6F59 100%);
			box-shadow: 0rpx 4rpx 20rpx 0rpx #F7E4E1, inset 0rpx 2rpx 20rpx 6rpx rgba(255, 174, 161, 0.61);
			border-radius: 150rpx;
			position: fixed;
			bottom: 82rpx;
			left: 192rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>